<div class="auto-complete">
  <h3 class="first">Basic</h3>
  <p-autoComplete [(ngModel)]="country" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)"
    field="name" [size]="30" placeholder="Countries" [minLength]="1"></p-autoComplete>
  <span style="margin-left:10px">Country: {{country ? country.name||country : 'none'}}</span>

  <h3>Advanced</h3>
  <p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="30" [minLength]="1"
    placeholder="Hint: type 'v' or 'f'" [dropdown]="true">
    <ng-template let-brand pTemplate="item">
      <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
        <img src="assets/showcase/images/demo/car/{{brand}}.png" style="width:32px;display:inline-block;margin:5px 0 2px 5px" />
        <div style="font-size:18px;float:right;margin:10px 10px 0 0">{{brand}}</div>
      </div>
    </ng-template>
  </p-autoComplete>
  <span style="margin-left:50px">Brand: {{brand||'none'}}</span>

  <h3>Multiple</h3>
  <span class="ui-fluid">
    <p-autoComplete [(ngModel)]="countries" [suggestions]="filteredCountriesMultiple" (completeMethod)="filterCountryMultiple($event)"
      styleClass="wid100" [minLength]="1" placeholder="Countries" field="name" [multiple]="true">
    </p-autoComplete>
  </span>
  <ul>
    <li *ngFor="let c of countries">{{c.name}}</li>
  </ul>
</div>
